<template>
  <el-dialog :close-on-click-modal='false' v-drag :title="$t('配置接口')" :visible.sync="dialogVisible" width="800px" @close='close' top="10vh">
    <div class="dialogContentBox">
      <el-form ref="form" :model="record" :label-width="lang === 'zh'?'100px':'130px'" inline label-position="left" :rules="rules" style="margin:0 20px;">
        <el-form-item :label="$t('名称')" prop="name" style="width:350px;">
          <div>{{record.name}}</div>
        </el-form-item>
        <el-form-item :label="$t('包含接口')" prop="Ports" style="width:340px;">
          <div>{{portsListShow(record.Ports)}}</div>
        </el-form-item>
        <el-form-item :label="$t('模式')" prop="enPortMode" style="width:350px;">
          {{enPortModeList[record.enPortMode]}}
        </el-form-item>
        <el-form-item :label="$t('状态')" prop="PortFlag" style="width:340px;">
          {{PortFlagList[record.PortFlag]}}
        </el-form-item>
        <el-form-item :label="$t('链路类型')" v-if="record.enPortMode === 1" prop="PHYSICS_PORT_TYPE" style="width:350px;">
          {{typeList[record.PHYSICS_PORT_TYPE]}}
        </el-form-item>
        <el-form-item label="Default VlanId" v-if="record.enPortMode === 1" prop="iVlanId" style="width:340px;">
          {{record.iVlanId}}
        </el-form-item>
        <el-form-item label="Trunk VlanId" v-if="record.enPortMode === 1 && record.PHYSICS_PORT_TYPE === 1" prop="iAllowed" style="width:350px;">
          {{record.iAllowed}}
        </el-form-item>
        <el-row :gutter="20" v-if="record.enPortMode === 0">
          <!-- ipv4 -->
          <el-col :span="12">
            <el-table size='mini' :data="record.ipv4" border style="width: 100%;margin-top: 5px;">
              <el-table-column prop='cPortIpv4' label="IPv4" align="center" min-width="100">
                <template slot-scope="scope">
                  <tooltip :html="scope.row.cPortIpv4" :content="scope.row.cPortIpv4" class="wid190" :refName="scope.row.cPortIpv4">
                  </tooltip>
                </template>
              </el-table-column>
              <el-table-column prop='cPortNetmask' :label="$t('子网掩码')" align="center" min-width="100">
                <template slot-scope="scope">
                  <tooltip :html="scope.row.cPortNetmask" :content="scope.row.cPortNetmask" class="wid190" :refName="scope.row.cPortNetmask">
                  </tooltip>
                </template>
              </el-table-column>
            </el-table>
          </el-col>
          <!-- ipv6 -->
          <el-col :span="12">
            <el-table size='mini' :data="record.ipv6" border style="width: 100%;margin-top: 5px;">
              <el-table-column prop='cPortIpv6' label="IPv6" align="center" min-width="100">
                <template slot-scope="scope">
                  <tooltip :html="scope.row.cPortIpv6" :content="scope.row.cPortIpv6" class="wid190" :refName="scope.row.cPortIpv6">
                  </tooltip>
                </template>
              </el-table-column>
              <el-table-column prop='cDevIpv6Prefix' :label="$t('前缀')" align="center" min-width="100">
                <template slot-scope="scope">
                  <tooltip :html="scope.row.cDevIpv6Prefix" :content="scope.row.cDevIpv6Prefix" class="wid190" :refName="scope.row.cDevIpv6Prefix">
                  </tooltip>
                </template>
              </el-table-column>
            </el-table>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button @click="close" class="addClose">{{$t('取 消')}}</el-button>
    </span>
  </el-dialog>
</template>
<script>
import { getBondInfo } from '@/api/network/api/bond'
export default {
  name: 'BondDialog',
  data () {
    return {
      dialogVisible: false,
      lang: this.$i18n.locale,
      record: {
        id: null,
        name: '',
        enPortMode: 0,
        PortFlag: 'up',
        ipv4: [], // cPortIpv4 cPortNetmask
        ipv6: [], // cPortIpv6 cDevIpv6Prefix
        PHYSICS_PORT_TYPE: 0,
        iVlanId: '',
        iAllowed: ''
      },
      recordCopy: {
        id: null,
        name: '',
        enPortMode: 0,
        PortFlag: 'up',
        ipv4: [],
        ipv6: [],
        PHYSICS_PORT_TYPE: 0,
        iVlanId: '',
        iAllowed: ''
      },
      enPortModeList: {
        0: this.$t('路由模式'),
        1: this.$t('透明模式')
      },
      PortFlagList: {
        'up': this.$t('开启'),
        'down': this.$t('关闭')
      },
      typeList: {
        0: 'access',
        1: 'trunk'
      },
      rules: {}
    }
  },
  methods: {
    init (data) {
      this.dialogVisible = true
      if (data) {
        getBondInfo({ name: data.BondName }).then(res => {
          if (res.status === 0) {
            this.record = Object.assign(this.record, res.info[0])
            this.record.name = this.record.BondName
            // if (typeof this.record.iAllowed === 'object') {
            //   let iAllowed = this.record.iAllowed
            //   this.record.iAllowed = ''
            //   for (const index in iAllowed) {
            //     this.record.iAllowed += index === '0' ? iAllowed[index].AllowedVlanId : (',' + iAllowed[index].AllowedVlanId)
            //   }
            // }
            if (typeof this.record.iAllowed === 'object') {
              let text = ''
              // 修改Trunk VlanId的值用，从1，2，3格式改成1-3
              let newNum = 0 // 如果有连续数字则等于连续数的开始
              let oldNum = 0 // 连续数的末尾
              let flag = false // 进入连续数的标识
              this.record.iAllowed.forEach((item, index) => {
                if (index === 0) { // 初始值
                  newNum = item.AllowedVlanId
                  text += item.AllowedVlanId
                } else {
                  if (flag) {
                    // 进入连续数
                    if (item.AllowedVlanId === (oldNum + 1)) {
                      oldNum = item.AllowedVlanId
                    } else {
                      text += oldNum
                      text += ',' + item.AllowedVlanId
                      newNum = item.AllowedVlanId
                      oldNum = 0
                      flag = false
                    }
                  } else {
                    // 未进入连续数
                    if (item.AllowedVlanId === (newNum + 1)) {
                      flag = true
                      oldNum = item.AllowedVlanId
                      text += '-'
                    } else {
                      newNum = item.AllowedVlanId
                      text += ',' + item.AllowedVlanId
                    }
                  }
                }
              })
              if (flag) {
                text += oldNum
              }
              this.record.iAllowed = text
            }
            for (const index in this.record.ipv4) {
              if (!this.record.ipv4[index].cPortIpv4) {
                this.record.ipv4.splice(index, 1)
                break
              }
            }
            for (const index in this.record.ipv6) {
              if (!this.record.ipv6[index].cPortIpv6) {
                this.record.ipv6.splice(index, 1)
                break
              }
            }
          }
        })
      }
    },
    close () {
      this.dialogVisible = false
      this.record = Object.assign({}, this.recordCopy)
      this.$refs.form.resetFields()
    },
    portsListShow (data) {
      let str = ''
      for (let index in data) {
        if (index === '0') {
          str += data[index]
        } else {
          str += ',' + data[index]
        }
      }
      return str
    }
  }
}
</script>
<style scoped>
.dialogContentBox {
  max-height: calc(80vh - 184px);
  overflow-y: auto;
}
</style>
